<template>
    <el-footer class="footer">
      <el-row class="footer-content" type="flex" justify="space-between">
        <!-- 左侧部分，通常可以放置公司Logo或者品牌标识 -->
        <el-col :span="8">
          <div class="footer-brand">
            <!-- <img src="@/assets/logo.png" alt="Logo" class="footer-logo" /> -->
            <span>My Company</span>
          </div>
        </el-col>
  
        <!-- 中间部分，放置一些常用链接 -->
        <el-col :span="8">
          <el-row justify="center" class="footer-links">
            <el-col :span="8">
              <a href="#">About Us</a>
            </el-col>
            <el-col :span="8">
              <a href="#">Contact</a>
            </el-col>
            <el-col :span="8">
              <a href="#">Privacy Policy</a>
            </el-col>
          </el-row>
        </el-col>
  
        <!-- 右侧部分，版权信息 -->
        <el-col :span="8" class="text-right">
          <div class="footer-copyright">
            &copy; 2024 My Company. All rights reserved.
          </div>
        </el-col>
      </el-row>
    </el-footer>
  </template>
  
  <script>
  export default {
    name: "FooterComponent"
  }
  </script>
  
  <style scoped>
  .footer {
    background-color: #f5f5f5;
    padding: 20px 0;
    font-size: 14px;
    color: #606266;
  }
  
  .footer-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .footer-brand {
    display: flex;
    align-items: center;
  }
  
  .footer-logo {
    height: 40px;
    margin-right: 10px;
  }
  
  .footer-links {
    display: flex;
    justify-content: center;
  }
  
  .footer-links a {
    margin: 0 10px;
    color: #606266;
    text-decoration: none;
  }
  
  .footer-links a:hover {
    color: #409eff;
  }
  
  .footer-copyright {
    font-size: 13px;
    color: #909399;
  }
  </style>
  